<template>
  <div class="chart-box2">
    <BorderBox13 style="padding: 2rem">
      <div class="content">
        <a-row type="flex" justify="space-between" style="height: 4rem">
          <a-col class="room-name text-primary">{{ detail.name }}</a-col>
          <a-col class="room-position text-white">{{
              (detail?.build_txt || '--') + "/" + (detail?.layer_txt || '--')
          }}</a-col>
        </a-row>
        <a-row :gutter="[12, 12]" class="row-data datav-scroller-bar">
          <template v-if="time && currentTimeDetail">
            <a-col :span="6" class="text-primary">预约人</a-col>
            <a-col :span="18">{{ currentTimeDetail.user_name }}</a-col>
            <a-col :span="6" class="text-primary">预约周期</a-col>
            <a-col :span="18"
              >{{ currentTimeDetail.start_time_txt }} ~
              {{ currentTimeDetail.end_time_txt }}</a-col
            >
            <a-col :span="6" class="text-primary">会议主题</a-col>
            <a-col :span="18">{{ currentTimeDetail.subject }}</a-col>
            <a-col :span="6" class="text-primary">支付金额</a-col>
            <a-col :span="18" class="text-green"
              >￥{{ currentTimeDetail.pay_money }}</a-col
            >
            <a-col :span="6" class="text-primary">支付时间</a-col>
            <a-col :span="18">{{ currentTimeDetail.pay_time }}</a-col>
          </template>
          <template v-if="!time && detail.key">
            <a-col :span="8" class="text-primary">当前使用状态</a-col>
            <a-col :span="16">
              {{ meetingRoomStatus == 1 ? "使用中" : "空闲" }}
            </a-col>
            <a-col :span="8" class="text-primary">最大容量</a-col>
            <a-col :span="16">{{ detail.max_number }}</a-col>
            <a-col :span="8" class="text-primary">设备支持</a-col>
            <a-col :span="16">{{ detail.device_info.join("/") }}</a-col>
            <a-col :span="8" class="text-primary">首计时单位</a-col>
            <a-col :span="16"
              >{{ detail.book_pay_info.first_time_unit }}小时</a-col
            >
            <a-col :span="8" class="text-primary">首计时单位收费额</a-col>
            <a-col :span="16">￥ {{ detail.book_pay_info.fee_unit }} </a-col>
            <a-col :span="8" class="text-primary">计时单位</a-col>
            <a-col :span="16">{{ detail.book_pay_info.time_unit }}小时</a-col>
            <a-col :span="8" class="text-primary">计时单位收费额</a-col>
            <a-col :span="16">￥ {{ detail.book_pay_info.fee_unit }}</a-col>
          </template>
        </a-row>
      </div>
    </BorderBox13>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  watch,
  nextTick,
  onMounted,
  computed,
} from "vue";
import store from "../../../../store";
import common from "../../utils/common";
import { BorderBox13 } from "@kjgl77/datav-vue3";
import moment from "moment";

export default defineComponent({
  name: "MeetingRoomDetail",
  components: { BorderBox13 },
  props: {
    detail: {
      type: Object,
      default: () => ({}),
    },
    time: {
      type: [Object, null],
      default: () => ({}),
    },
  },
  setup(props) {
    const state = reactive({
      meetingRoomStatus: 1, // 1占用中 2空闲中
      intervalTime: 1000,
    });

    const timeFormat = "HH:mm";
    const currentTimeDetail = computed(() => {
      const { detail, time } = props;
      if (time && detail && detail.key) {
        for (let item of detail.reserved_time) {
          const isIn = moment(time.time, timeFormat).isBetween(
            moment(item.start_time_txt, timeFormat),
            moment(item.end_time_txt, timeFormat),
            "minutes",
            "[]"
          );
          if (isIn) {
            return item;
          }
        }
      }

      return null;
    });

    const getStatus = () => {
      const { detail } = props;
      for (let item of detail.reserved_time) {
        const isIn = moment().isBetween(
          moment(item.start_time_txt, timeFormat),
          moment(item.end_time_txt, timeFormat),
          "minutes",
          "[]"
        );
        if (isIn) {
          state.meetingRoomStatus = 1;
          return;
        }
      }
      state.meetingRoomStatus = 0;
    };

    const getRoomStatus = () => {
      setTimeout(() => {
        if (props.detail && props.detail.key && !props.time) {
          getStatus();
        }
      }, state.intervalTime);
    };

    getRoomStatus();

    return {
      currentTimeDetail,
      ...toRefs(state),
    };
  },
});
</script>
<style lang="less" scoped>
@import "../../styles/common.less";
.content {
  width: 100%;
  height: 100%;
  .room-name {
    font-size: 1.8rem;
    font-weight: bold;
  }
  .room-position {
    font-size: 2rem;
  }
  .row-data {
    margin-top: 1rem;
    height: calc(100% - 4.5rem);
    overflow: hidden auto;
  }
}
</style>
